<template>
	<view>
		<view  style="display: flex;flex-direction: column;margin-top: 150rpx;">
			<view style="display: flex;flex-direction: row;align-items: center;">
				<view style="align-items: center;">
					<image style="display: block; width: 80rpx;height: 80rpx;background-color: white;border-radius: 50rpx;margin-left: 20rpx;" :src="imgURL" mode="aspectFill" @tap="lookImg"></image>
				</view>
				<view style="display: flex;flex: 1; flex-direction: column;margin-left: 10rpx;justify-content: center;" @click="clickUserIcon">
					<text style="font-weight: bold;font-size: 30rpx;">张三</text>
					<text style="font-size: 18rpx;">点击产看/修改资料</text>
				</view>
			</view>
			<view class="book-bgview">
				<view class="book-item" v-for="(buttonItem,index) in buttonList" :index='index'>
					<view style="align-content: center;">
						<image class="book-image" :src="buttonItem.iconName" mode="aspectFill"></image>
					</view>
					<view class="book-text">{{buttonItem.name}}</view>
				</view>
			</view>
		</view>

		<view>
			<uni-list>
				<uni-list-item v-for="(item,index) in dataList" :key="index" :title="item.title" :rightText="item.rightText" showArrow="true" :clickable="true" @tap="listitemClick(index)"></uni-list-item>
			</uni-list>
		</view>
	</view>
</template>

<script>
	import { pathToBase64, base64ToPath } from '@/js_sdk/mmmm-image-tools/index.js'
	export default{
		data(){
			return{
				imgURL: '/static/默认头像.png',
				imgArr:['/static/默认头像.png'],
				//base64图片地址
				baseImageList:[],
				buttonList:[
					{iconName:'/static/icon_indent.png',name:'我的订单'},
					{iconName:'/static/icon_msgcenter.png',name:'消息中心'},
					{iconName:'/static/icon_sever.png',name:'客服中心'},
					{iconName:'/static/icon_download.png',name:'下载管理'}
				],
				dataList:[
					{title:'我的课程',rightText:'查看全部'},
					{title:'我的收藏',rightText:''},
					{title:'意见反馈',rightText:''},
					{title:'设置',rightText:''}
				]
			}
		},
		methods:{
			// setUserIcon: function() {
			// 	uni.chooseImage({
			// 		count:9,
			// 		sizeType:['compressed'],
			// 		success:function(res){
			// 			this.imgArr = res.tempFilePaths
			// 		}
			// 	});
			// },
			clickUserIcon(){
				uni.chooseImage({
					count: 1,
					sizeType: "compressed",
					success: (res) => {
						this.imgArr = res.tempFilePaths;
						this.imgURL = res.tempFilePaths[0];
						//地址转base64并传递给服务器
						pathToBase64(res.tempFilePaths[i]).then(path => {
							this.baseImageList = this.baseImageList.concat(path);//成功后利用concat方法追加到baseImageList中
						}).catch(error => {
							console.error(error)
						})
					}
				})
			},
			lookImg(){
				const urls = this.imgArr
				const current = 0
				uni.previewImage({
					urls,
					current
				})
			},
			listitemClick(index){
				switch (index){
					case 0:
					{
						uni.navigateTo({
							url:'flex'
						});
					}
						break;
					case 1:
					{
						uni.navigateTo({
							url:'mine'
						});
					}
						break;
					case 2:
					{
						uni.navigateTo({
							url:'common_module'
						});
					}
						break;
					default:
					{
						uni.navigateTo({
							url:'index'
						});
					}
						break;
				}
				console.log(index);
			}
		}
	}
</script>

<style>
	.book-bgview{
		display: flex;
		flex-direction: row;
		margin-top: 60rpx;
		margin-bottom: 40rpx;
	}
	.book-item{
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		margin-left: 10rpx;
		margin-right: 10rpx;
		width: 25%;
	}
	.book-image{
		width: 50rpx;
		height: 50rpx;
		margin-bottom: 10rpx;
	}
	.boo-text{
		height: 20rpx;
	}
</style>